<!--
 * @Description: 
 * @Autor: Bingo
 * @Date: 2022-12-15 15:58:48
 * @LastEditors: Bingo
 * @LastEditTime: 2023-05-18 17:39:08
-->
<template>
	<KkModal ref="KkModal" :title="title" :footer="null" width="30%" destroyOnClose v-bind="$attrs" v-on="$listeners">
		<section class="content-box" :class="isRequired ? 'isRequired' : ''">
			<a-input v-model="name" placeholder="请在此输入格式名词"/>
		</section>
		<div class="tips">如果命名与已有格式一致（初始格式除外），则覆盖原有的格式设置。</div>
		<div name="footer" style="text-align: right; margin-top: 10px">
			<a-button type="primary" @click="handleConfirm" :loading="confirmLoading">确定</a-button>
			<a-button @click="closeMd" style="margin-left: 10px">关闭</a-button>
		</div>
	</KkModal>
</template>
<script>
export default {
	name: 'ControlMd',
	components: {},
	props: {
		title: {
			type: String,
			default: '保存自定义格式'
		},
		isRequired: {
			type: Boolean,
			default: true
		},
		needClose: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			name: '',
			modalLoading: false,
			confirmLoading: false
		};
	},
	methods: {
		async show(data, type) {
			this.$refs.KkModal.show();
		},
		closeMd() {
			this.name = '';
			this.confirmLoading = false;
			this.$refs.KkModal.cancel();
		},
		back() {
			this.closeMd();
		},
		handleConfirm() {
			if (!this.name) {
				this.$message.error(`请填写名称!`);
				return;
			}
			this.$emit('saveName', this.name);
		}
	}
};
</script>
<style scoped lang="less">
.content-box.isRequired {
	position: relative;
	&::before {
		position: absolute;
		top: -44px;
		left: 0px;
		content: '*';
		color: red;
	}
}
.title {
	font-size: 14px;
	font-weight: bold;
	color: #333333;
	margin-bottom: 18px;
}
.content-container {
	padding: 20px 0 5px 20px;
	border: 1px solid #9e9e9e73;
	border-radius: 6px;
	margin-bottom: 19px;
}
.tips {
	color: #fa3737;
    margin:20px 0;
}
</style>
